<template>
	<view style="padding-bottom: 100rpx;">
		<view class="" style="margin:20rpx auto;width: 700rpx;">
			<u-image :src="info.cover" width="700" height="240" border-radius="20"></u-image>
		</view>

		<view class="">
			<view>
				<view class="paddings" style="font-weight: bold;font-size: 30rpx;">
					{{info.storeName}}
				</view>
				<!-- <view style="font-size: 22rpx;color: #fff;display: flex;">
			   	<view style="color:#379BFC;padding: 7rpx 15rpx;border-radius: 10rpx;">
			   		车位总数量：{{info.cpNum}}</view>
			   		<view style="padding: 7rpx 15rpx;border-radius:10rpx;color: #F29100;margin-left: 10rpx;" v-if="info.wxCpNum" >装修中：{{info.wxCpNum}}</view>
			   	<view style="padding: 7rpx 15rpx;border-radius:10rpx;margin-left: 10rpx;"
			   		:style="{color:info.canCpNum===info.cpNum?'#ff4f4f':'#49BD40' }"  v-if="!info.wxCpNum" >使用中：{{info.canCpNum}}</view>
			   </view> -->

				<view class="u-flex u-row-between u-border-bottom paddings">
					<view class="">
						<u-rate v-model="info.score" active-color="#FABE00"></u-rate>
						<text style="color: #FABE00;margin-left: 20rpx;">{{info.score}}分</text>
					</view>

				</view>

				<view v-for="(item,index) in info.washPrice" style="padding: 10rpx 30rpx;">
					<view style="font-size: 22rpx">
						<text>{{item.start}}-{{item.end}}</text>
						<text
							class="u-margin-left-10 u-margin-right-10">价格:{{item.basePrice}}元/{{info.baseTime}}分钟</text>
						<text>超出：{{item.overPrice}}元/分钟</text>
					</view>
				</view>


				<view class="u-flex u-row-between $u-tips-color  paddings">
					<view>
						{{info.address}}
					</view>
					<view class="u-flex">
						<view>
							距离您{{info.distance}}
						</view>
					</view>
				</view>
				
				
				
<view class=" paddings" v-if="isall">
					<u-section title="店铺车位" color="#2979FF" lineColor="#2979FF" :right="false"></u-section>
					<view v-for="(item,index) in list" :key="index" class="bg">
						<view class="u-flex u-row-between " style="align-items: center ; margin-bottom: 20rpx;">
							<view style="font-weight: bold;font-size: 28rpx;">{{item.carportName}}车位</view>
						</view>
						<view class="u-flex u-row-between">
							<u-button size="mini" type="primary" :custom-style="{marginRight:'20rpx'}"
								@click="controls(item)" v-if="item.status==0  ">开始订单</u-button>
							<u-button size="mini" type="error" v-if="item.status==1">占用中</u-button>
							<u-button size="mini" type="warning" :custom-style="{marginLeft:'20rpx'}"
								v-if="item.orderId" @click="end(item)">结束订单</u-button>
							<u-button size="mini" :custom-style="{background:'#F29100',color:'#fff'}"
								v-if="item.status==2">
								装修中</u-button>
							<view v-if="item.useTime" class="u-type-error">已洗{{item.useTime}}</view>
						</view>
					</view>
				</view>




				<u-gap height="10" bg-color="#f1f1f1"></u-gap>



				<!-- 优惠券 -->
				<view class=" paddings">
					<u-section title="优惠券" color="#2979FF" lineColor="#2979FF" @click="moreCoupond"></u-section>
					<view class="bg2 u-flex" :style="{backgroundImage:'url('+imagesurl+'app/images/coupon.png)'   }"
						v-for="(item,index) in Coupond" :key="index">
						<view class="" style="width: 210rpx;text-align: center;">
							<view class="" style="color: #fff;font-size: 50rpx;">
								<text style="font-size: 30rpx;">￥</text> {{item.saleMoney}}
							</view>
						</view>
						<view class="" style="width: 400rpx;padding:0 40rpx ;">
							<view style="font-weight: bold;font-size: 30rpx;" v-if="item.needMoney!=='0.00'">
								满{{item.needMoney}}减{{item.saleMoney}}优惠券</view>
							<view style="font-weight: bold;font-size: 30rpx;" v-else>
								{{item.needMoney=='0.00'?'通用券':'满减券'}}
							</view>
							<view style="margin: 20rpx 0;font-size: 24rpx;color: #999999;">{{item.endStr}}</view>
							<view style="font-size: 24rpx;color: #999999;padding-top: 20rpx;" class="u-border-top">
								不可叠加使用</view>
						</view>
						<view class="" style="width: 80rpx;;text-align: center;">
							<view style="color: #5596FF" @click="agreeCoupond(item)">
								立</br>即</br>领</br>取
							</view>
						</view>
					</view>
				</view>



				<!-- 卡券 -->
				<view class="" style="margin: 30rpx 30rpx 0 30rpx;">
					<u-section title="店铺卡券" color="#2979FF" lineColor="#2979FF" @click="moreCard"></u-section>
				</view>
				
				<card :list='card' @buy='buy'></card>





				


				<view class="u-border-top"
					style="z-index: 99; padding: 20rpx; position: fixed;bottom: 0;left: 0;background: #fff;width: 100%;">
					<u-button type="primary" @click="bind">绑定车牌</u-button>
				</view>


			</view>
		</view>
		<state ref='mask' icon='bell' iconcolor='#F30C0C' tags='温馨提示~'
		
				content="请确保人和车离场后再手动结束订单哦！" @ready='ready'></state>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import state from '../../components/state.vue'
	import url from '@/common/baseUrl.js';
	import payway from '../../common/wxpay.js';
		import card from './component/card.vue'
	export default {
		components: {
					state,
					card
		},
		data() {
			return {
				itemId:'',
				id: "",
				info: {

				},
				list: [],
				card: [],
				Coupond: [],
				imagesurl: url.imageUrl,
				isall: '',
				cid: "", //车位id
			}
		},
		
		onLoad(options) {
			console.log(options, "777")
			// 普通二维码扫描进入
			if (options.q) {
				let url = decodeURIComponent(options.q);
				let parms = this.getQueryString(url);
				console.log(parms, "pa")
				if (parms.sid) {
					this.id = parms.sid;
				}
				if (parms.id) {
					this.id = parms.id;
				}
				if (parms.cid) {
					this.cid = parms.cid;
				}
				if (parms.isall) {
					this.isall = JSON.parse(parms.isall);
				}


			}
			// 内部二维码进入
			if (options.sid) {
				this.id = options.sid;
			}
			if (options.id) {
				this.id = options.id;
				this.isall = JSON.parse(options.isall);
			}
			if (options.cid) {
				this.cid = options.cid;
			}

			this.get()
			this.car()

			this.getcard()

			this.getCoupond()

		},

		methods: {
			
			color(params) {
				var colorList = ['to right, #FF6D8A,#FF4962', 'to right, #FFB916,#FE8F1E','to right, #7AC2FE,#3F96FF'];
				var colorList2 = [' #FF6D8A', '#FFB916',' #7AC2FE'];
				params.forEach((item,index)=>{
					item.color=colorList2[index % colorList2.length]
					item.bg=colorList[index % colorList.length]
				})
				return params
			},
			bind() {
				uni.navigateTo({
					url: '/pages/bindCar/list'
				})
			},
			getQueryString(url) {
				let requestParams = {};
			 if (url.indexOf("?") !== -1) {
					let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
					let strs = str.split("&"); //将字符串内容以&分隔为一个数组
					for (let i = 0; i < strs.length; i++) {
						requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
						// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
					}
				}
				return requestParams;

			},
			controls(item) {
				uni.showModal({
					title: "是否开门?",
					content: "开门后需要手动结束洗车哦~",
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/api/indent/washStart', {
								carport_id: item.id,
							}).then(res => {

								this.$refs.uToast.show({
									title: '开门成功',
									type: 'success',
									callback: () => {
										this.car()
									}

								})
							}).catch(err => {
								if (err.data.code == 500 && err.data.msg == "余额不足") {
									uni.navigateTo({
										url: "/pages/account/index"
									})
								}
								console.log(err)
							})
						}
					}

				})
			},
			ready(){
				this.$u.post('/api/indent/WashFinish', {
					orders_id: this.itemId,
				}).then(res => {
					this.$refs.uToast.show({
						title: '关门成功',
						type: 'success',
						callback: () => {
							this.car()
						}
					})
				}).catch(err => {})
			},
			end(item) {
				this.$refs.mask.show = true
				this.itemId=item.orderId
			},
			agreeCoupond(item) {
				this.$u.post('/api/user/getCoupon', {
					coupon_id: item.id,

				}).then(res => {
					this.$u.toast("领取成功")

				}).catch(err => {

				})
			},
			moreCoupond() {
				uni.navigateTo({
					url: './moreCoupond?id=' + this.id
				})
			},
			moreCard() {
				uni.navigateTo({
					url: './moreCard?id=' + this.id
				})
			},
			getCoupond() {
				this.$u.post('/api/index/coupon', {
					store_id: this.id,
					page: 1,
					limit: 3
				}).then(res => {
					
					
					this.Coupond = res;

				}).catch(err => {

				})
			},
			getcard() {
				this.$u.post('/api/index/card', {
					store_id: this.id,
					page: 1,
					limit: 3
				}).then(res => {
					var arr= this.color(res);
					
					this.card = arr;

				}).catch(err => {

				})

			},
			buy(item) {
				this.$u.post('/api/indent/buyCard', {
					card_id: item.id,
					store_id: this.id,
				}).then(res => {
					if (res == null) {
						this.$refs.uToast.show({
							title: '领取成功',
							type: 'success',

						})
					} else {
						var packages = res.package;
						var {
							noncestr,
							timestamp,
							signtype,
							paysign
						} = res
						payway.wx(timestamp, noncestr, packages, signtype, paysign).then(
							res => {
								this.$refs.uToast.show({
									title: '购买成功',
									type: 'success',
								})
							}).catch(err => {})
					}
				}).catch(err => {

				})


			},
			get() {
				this.$u.post('/api/index/storeDetail', {
					store_id: this.id,
					lat: this.$store.state.location.lat ? this.$store.state.location.lat : 0,
					lng: this.$store.state.location.lng ? this.$store.state.location.lng : 0,
				}).then(res => {
					var info = res;
					info.score = Number(res.score);
					this.info = info;

				}).catch(err => {

				})
			},
			car() {
				this.$u.post('/api/index/carport', {
					store_id: this.id,

				}).then(res => {
					// 如果是单独的车位码
					if (this.cid) {
						let list = res.filter(item => item.id == this.cid);
						this.list = list;
					} else {
						this.list = res;
					}
				}).catch(err => {

				})

			}

		}
	}
</script>

<style>
	.paddings {
		padding: 20rpx 30rpx;
	}

	.bg {
		background: #E5EFF9;
		width: 700rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		margin: 20rpx auto;
		
	}


	.bg2 {
		background-size: cover;
		width: 690rpx;
		height: 200rpx;
		margin: 20rpx auto;
	}

	.list {
		padding: 20rpx;
		color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.b {
		background: linear-gradient(94deg, #4BA6FF 0%, #0064C6 100%);
	}

	.g {
		background: linear-gradient(90deg, #21D676 0%, #0BBC75 100%);
	}

	
</style>
